<template>
  <div class="rest_rights">
    <div class="rest_rights_btn">
      <transition name="el-zoom-in-center">
        <div v-show="chatStore.showDynamicToken" class="rest_rights_dynamic">-{{ chatStore.dynamicToken }}</div>
      </transition>
      <el-popover
        popper-class="ai__ppt_reset_rigths_pop"
        placement="top-start"
        trigger="hover"
        width="auto"
        :visible-arrow="true"
        :offset="8"
        @show="hasShowRights"
        @hide="removeDocClickCloseRightPop"
        @after-leave="popoverAfterLeave"
        ref="rigthsPopRef"
      >
        <template slot="reference">
          <div class="rest__rights">
            <p>
              <svg-icon icon-class="magic-star" class="fs-16"></svg-icon>
              <em v-if="hasLogin">{{ restRights }} </em>
              <em v-else>0 </em>
            </p>
            <!-- <span class="fs-12 fs-c-1">|</span>
            <p>
              <svg-icon icon-class="power-icon" class="fs-12"></svg-icon>
              <em class="vip-color-primary">{{ userInfo.restTokens }}</em>
            </p> -->
          </div>
        </template>
        <div class="user__rights_list new-token" v-if="newTokenTips">
          <div class="new-token_title">
            <svg-icon icon-class="power-icon" class="mr-6"></svg-icon>
            {{ userInfo.userToken }}个AI能量已放入您的账户中！
          </div>
          <div class="new-token_btns">
            <el-button
              type="info"
              @click="clickNewTokenBtn()">
              我知道了
            </el-button>
            <el-button class="btn-vip-primary1"
              type="primary"
              @click="clickNewTokenBtn(true)">
              立即查看
            </el-button>
          </div>
        </div>
        <div class="user__rights_list" :style="{width: popoverWidth}" :class="{ vip: userInfo.is_member }" v-else-if="isBuyTypeEnergy">
          <div class="user__rights_bg"></div>
          <div class="user__rights_cont">
            <div class="head">
              <template v-if="hasLogin">
                <svg-icon v-if="userInfo.is_member" icon-class="vip-light" class="hg-icon fs-20"></svg-icon>
                <svg-icon v-else icon-class="hg-icon" class="hg-icon fs-20"></svg-icon>
                <span class="fs-16 fs-b">{{ userInfo.is_member ? 'VIP会员' : '非VIP会员' }}</span>
                <div class="flex-1"></div>

                <div class="dropdown-wrap" @mouseenter="showDropdown=true" @mouseleave="showDropdown=false">
                  <div class="dropdown-link">
                    能量及规则明细<i class="el-icon-caret-bottom ml-4"></i>
                  </div>
                  <transition name="el-zoom-in-top">
                    <ul v-show="showDropdown" class="dropdown-menu">
                      <li class="dropdown-item" @click="clickDropdownItem(1)">能量计费规则</li>
                      <li class="dropdown-item" @click="clickDropdownItem(2)">能量消费记录</li>
                    </ul>
                  </transition>
                </div>
              </template>
              <span v-else class="nolLogin-title">{{ loginCfg.title }}</span>
            </div>
            <template v-if="hasLogin">
              <div class="list__enegy">
                <div class="rest__power">
                  <div class="power__title">当前可用总能量：</div>
                  <svg-icon icon-class="power-icon" class="fs-16"></svg-icon>
                  <span class="power__text">{{ userInfo.userToken }}</span>
                </div>
                <template v-if="userInfo.userTokenList.length">
                  <div v-for="(it, i) in userInfo.userTokenList" :key="i" class="enegy__block" :class="it.type">
                    <div class="enegy__title">{{ it.name }}</div>
                    <ul class="enegy__list">
                      <li class="enegy__item" v-for="(item, c) in it.list" :key="c">
                        <svg-icon icon-class="power-icon" class="fs-16"/>
                        <span :class="{'color-error': !item.amount}">{{ item.amount }}</span>
                        <em v-if="item.unlimited">（永久有效）</em>
                        <em v-else-if="item.valid_time">（{{ item.valid_time }}前使用有效）</em>
                      </li>
                    </ul>
                  </div>
                </template>
              </div>
            </template>
            <template v-else>
              <div class="list__content mt-20" v-for="(it, i) in rights" :key="i">
                <p class="fs-b fs-12" v-if="it.title">
                  {{ it.title }}
                </p>
                <template v-if="it.list">
                  <p class="list__item fs-12 indent" v-for="(text,index) in it.list" :key="index" >
                    <span>{{ text }}</span>
                  </p>
                </template>
              </div>
            </template>

            <div
              class="rest__rights_footer"
              :class="{
                mutiple: !userInfo.is_member
              }"
            >
              <el-button
                v-if="!hasLogin"
                class="btn__primary btn-vip-primary1 toLogin"
                type="primary"
                @click="toLoginPage()"
                >{{ loginCfg.btn }}</el-button
              >
              <template v-else-if="userInfo.is_member">
                <el-button class="btn__primary btn-vip-primary1 w-full"
                  type="primary"
                  @click="toUserToken">
                  <p class="btn__primary-title">{{ btnCfg.jgb.title}}</p>
                  <p class="btn__primary-sub" v-if="btnCfg.jgb.content">{{ btnCfg.jgb.content }}</p>
                </el-button>
              </template>

              <template v-else>
                <el-button
                  class="btn__primary btn-vip-primary"
                  type="primary"
                  @click="toVipCenter">
                  <p class="btn__primary-title">{{ btnCfg.vip.title }}</p>
                  <p class="btn__primary-sub" v-if="btnCfg.vip.content">{{ btnCfg.vip.content }}</p>
                </el-button>
                <el-button class="btn__primary btn-vip-primary1"
                  type="primary"
                  @click="toUserToken">
                  <p class="btn__primary-title">{{ btnCfg.jgb.title}}</p>
                  <p class="btn__primary-sub" v-if="btnCfg.jgb.content">{{ btnCfg.jgb.content }}</p>
                </el-button>
              </template>
            </div>
          </div>
        </div>
        <div class="user__rights_list" :style="{width: popoverWidth}" :class="{ vip: userInfo.is_member }" v-else-if="isBuyTypeRight">
          <svg-icon v-if="userInfo.is_member" icon-class="vip-head" class="vip-head-icon"></svg-icon>
          <div class="head">
            <template v-if="hasLogin">
              <svg-icon v-if="userInfo.is_member" icon-class="vip-light" class="hg-icon fs-20"></svg-icon>
              <svg-icon v-else icon-class="hg-icon" class="hg-icon fs-20"></svg-icon>
              <span class="fs-16 fs-b">{{ userInfo.is_member ? 'VIP会员' : '入门版' }}</span>
            </template>
            <span v-else class="nolLogin-title">登录领取免费AI权益</span>
          </div>
          <div class="list__content mt-20">
            <p class="list__item fs-12" v-for="item in rights" :key="item.right_id" :class="{'redwarn': hasLogin && !item.rest_limit}">
              <span>{{ item.name }}：</span>
              <span v-if="item.is_unlimited">无限制</span>
              <span v-else-if="hasLogin">
                <span>{{ item.rest_limit }} / {{ item.total}}</span>
                <span>（次{{item.limit_rate===1?'/月':item.limit_rate===2?'/天': ''}}）</span>
              </span>
              <template v-else>
                <span>{{ item.rest_limit }}</span>
                <span>次{{item.limit_rate===1?'/月':item.limit_rate===2?'/天': ''}}</span>
              </template>
            </p>
          </div>
          <div
            class="rest__rights_footer"
            :class="{
              mutiple: !userInfo.is_member
            }"
          >
            <el-button
              v-if="!userInfo.is_member && hasLogin"
              class="btn__primary btn-vip-primary"
              type="primary"
              @click="toVipCenter({ eid: 8000 })"
              >升级会员</el-button
            >
            <el-button
              v-if="!hasLogin"
             class="btn__primary btn-vip-primary1 toLogin"
              type="primary"
              @click="toLoginPage()"
              >立即登录领取</el-button
            >
          </div>
        </div>
        <div class="user__rights_list" :style="{width: popoverWidth}" :class="{ vip: userInfo.is_member }" v-else-if="isBuyTypeToken">
          <div class="head" v-if="!hasLogin">
            <span class="nolLogin-title">登录领取免费AI权益</span>
          </div>
          <div class="list__content mt-20" v-if="hasLogin">
            <p class="list__item fs-12" v-for="(item,index) in rights" :key="index" >
              <span>{{ item.name }}：</span>
              <span>{{ item.content }}</span>
            </p>
          </div>
          <div class="rest__rights_footer">
            <el-button
              v-if="userInfo.userToken === 0 && hasLogin"
              class="btn__primary btn-vip-primary"
              type="primary"
              @click="toUserToken"
              >充值token</el-button
            >
            <el-button
              v-if="!hasLogin"
              class="btn__primary btn-vip-primary1 toLogin"
              type="primary"
              @click="toLoginPage()"
              >立即登录领取</el-button
            >
            <el-button
              class="btn__primary btn-vip-primary1 toLogin"
              v-if="userInfo.canDrawToken"
              type="primary"
              @click="drawToken()"
              >免费领取token</el-button
            >
          </div>
        </div>
      </el-popover>

      <!-- <el-popover
        v-if="isShowActivity"
        popper-class="ai__ppt_reset_rigths_pop"
        placement="bottom"
        trigger="hover"
        :teleported="false"
        width="280"
        :show-arrow="false"
        :offset="8"
      >
        <template slot="reference">
          <span class="upgrade__tips ml-8 cursor">
            <svg-icon icon-class="upgrade-icon" class="fs-16 pos-t-1"></svg-icon>
            <span class="fs-14 fs-b">升级</span>
          </span>
        </template>
        <div class="user__rights_list activity">
          <div class="head mb-14" :style="{ '--b-vip-bg': `url(${bigVipBg})` }">
            <p class="flex-basic">
              <svg-icon icon-class="hg-icon" class="hg-icon fs-20"></svg-icon>
              <span v-if="upgradeActivityDetail" class="fs-16 fs-b">{{ upgradeActivityDetail.title }}</span>
            </p>
            <p v-if="upgradeActivityDetail" class="fs-12 fs-c-5">{{ upgradeActivityDetail.desc }}</p>
          </div>
          <div class="activity__image" v-if="upgradeActivityDetail && upgradeActivityDetail.background_image">
            <img :src="upgradeActivityDetail.background_image" width="100%" height="auto" />
          </div>
          <div class="list__content mt-20" v-if="upgradeActivityDetail && upgradeActivityDetail.content">
            <p
              class="list__item fs-12"
              v-for="item in upgradeActivityDetail.content.split(';') || []"
              :key="item"
            >
              <span>{{ item }}</span>
            </p>
          </div>
          <el-button
            class="to__vip_btn btn-vip-primary1 mt-20 mb-20"
            type="primary"
            @click="toVipCenter({ eid: 8001 })"
            >现在升级</el-button
          >
        </div>
      </el-popover> -->
      <!-- <span
        class="upgrade__tips ml-8 cursor"
        @click="toVipCenter({ eid: 8000 })"
      >
        <span class="fs-14 fs-b">升级</span>
        <svg-icon icon-class="upgrade-icon" class="fs-16"></svg-icon>
      </span> -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getBackEndConfig, getUserFreeToken, getActivityDetail } from '@/api/common'

export default {
  name: 'RestRights',
  components: {
  },
  data () {
    return {
      right: 'outline',
      // bigVipBg: require('@/assets/big-vip-bg.png'),
      // cfgConifg: null,
      showDropdown: false,
      newTokenTips: false,
      loginCfg: {
        title: '登录查看AI权益',
        btn: '立即登录',
        rights: [
          {
            title: '享受权益：',
            list: ['AI深度思考与对话', 'AI文档总结与问答', '丰富实用AI工具']
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['chatStore', 'hasLogin', 'userInfo', 'appInfo', 'btnCfg']),
    isXz () {
      return process.env.VUE_APP_NAME === 'xz'
    },
    isYueShu () {
      return process.env.VUE_APP_NAME === 'yueshu'
    },
    popoverWidth () {
      return this.newTokenTips ? 'auto' : (this.isBuyTypeEnergy && this.hasLogin ? 378 + 'px' : 280 + 'px')
    },
    isDll () {
      return process.env.VUE_APP_NAME === 'dll'
    },
    isBuyTypeToken () {
      return process.env.VUE_APP_BUY_TYPE === 'token'
    },
    isBuyTypeEnergy () {
      return process.env.VUE_APP_BUY_TYPE === 'energy'
    },
    isBuyTypeRight () {
      return process.env.VUE_APP_BUY_TYPE === 'right'
    },
    // upgradeActivity () {
    //   const active = this.cfgConifg?.find?.((v) => v.scene?.includes('BuyingTips'))
    //   return active || null
    // },

    // upgradeActivityDetail () { return this.upgradeActivity.activity_list[0] || null },
    // isShowActivity () {
    //   return !this.userInfo.is_member && this.upgradeActivity
    // },
    rights () {
      if (this.isBuyTypeRight) {
        return this.hasLogin ? this.userInfo.userRights : this.chatStore.defaultRights
      } else if (this.isBuyTypeToken) {
        return [{
          name: 'AI普通问答',
          content: '1000token/次'
        }, {
          name: 'AI高级问答',
          content: '1500token/次'
        }, {
          name: 'AI文档总结',
          content: '1500至7000token/次'
        }, {
          name: 'AI文档对话',
          content: '1500至7000token/次'
        }]
      } else if (this.isBuyTypeEnergy) {
        return this.loginCfg.rights
      }
      return []
    },

    restRights () { // 剩余次数/token/能量
      if (process.env.VUE_APP_BUY_TYPE === 'right') {
        const curModel = this.chatStore.docSummarize.status ? this.chatStore.currentDocumentModel : this.chatStore.currentModel
        return (this.userInfo.userRights?.find((v) => v.right_id === curModel?.right_id)?.rest_limit || 0) + '次'
      } else if (['token', 'energy'].includes(process.env.VUE_APP_BUY_TYPE)) {
        const count = this.userInfo.userToken || 0
        if (count < 10000) return count
        return parseFloat((count / 10000).toFixed(2)) + '万'
      }
      return ''
    }
  },
  watch: {
    hasLogin (val) {
      if (this.$refs.rigthsPopRef?.showPopper) {
        // eslint-disable-next-line no-unused-expressions
        this.$refs.rigthsPopRef?.doClose?.()
      }
      if (!val) {
        this.getLoginCfg()
      }
    }
  },
  methods: {
    async drawToken () {
      const { data } = await getUserFreeToken()
      if (data?.code === 200) {
        this.$PsMessage({ message: '领取成功' })
        this.$xz('xz_update_ai_token')
        return
      }
      this.$PsMessage({ message: data?.msg || '领取失败' })
    },
    hasShowRights () {
      this.$xz('HtmlClickReport', { ReportID: 7704 })
    },
    // 登录
    toLoginPage () {
      this.$gotoLogin({
        'xz': () => {
          this.$xz('HtmlClickReport', { ReportID: 7616 })
        }
      })
    },
    // 升级
    toVipCenter () {
      this.$gotoMember({
        'xz': () => {
          this.$xz('HtmlClickReport', { ReportID: 8504 })
          this.$xz('xz_set_stat_id', 8504)
        }
      })
    },
    // 购买token，能量包
    toUserToken () {
      this.$gotoUserToken({
        'xz': {
          stat_id: 8506,
          callback: () => {
            this.$xz('HtmlClickReport', { ReportID: 8506 })
            this.$xz('xz_set_stat_id', 8506)
          }
        }
      })
    },
    removeDocClickCloseRightPop () {
      if (this.docClickCloseRightPop_) {
        document.removeEventListener('click', this.docClickCloseRightPop_, true)
        this.docClickCloseRightPop_ = null
      }
    },
    clickDropdownItem (type) {
      this.showDropdown = false
      switch (type) {
        case 1:
          // this.$xz('HtmlClickReport', { ReportID: 7648 })
          // this.$gotoMember({
          //   'xz': {
          //     action: 'seeFnPrice'
          //   }
          // })
          this.$gotoEnergyRules({
            'xz': () => {
              this.$xz('HtmlClickReport', { ReportID: 7648 })
            }
          })
          break
        case 2:
          // this.$xz('HtmlClickReport', { ReportID: 7649 })
          // encodeURIComponent解决跨端时客户端对字符串中的“/”截断问题
          // this.$xz('OpenUserCenter', encodeURIComponent(JSON.stringify({ to: '/orderlist', status: 3 })))
          this.$gotoEnergyRecord({
            'xz': () => {
              this.$xz('HtmlClickReport', { ReportID: 7649 })
            }
          })
          break
        default:
          break
      }
    },
    clickNewTokenBtn (isOpenInfo) {
      if (isOpenInfo) {
        this.$xz('HtmlClickReport', { ReportID: 7647 })
        this.newTokenTips = false
        this.$nextTick(() => {
          // eslint-disable-next-line no-unused-expressions
          this.$refs.rigthsPopRef.updatePopper?.()
        })
      } else {
        // eslint-disable-next-line no-unused-expressions
        this.$refs.rigthsPopRef.doClose?.()
      }
    },
    popoverAfterLeave () {
      this.newTokenTips = false
    },
    async getLoginCfg () {
      if (!this.isBuyTypeEnergy) return
      if (this.loginCfgGet_) return
      this.loginCfgGet_ = true
      const { data } = await getBackEndConfig({
        app_id: this.appInfo.appID,
        version: this.appInfo.version,
        union_id: this.appInfo.channel,
        keyname: 'cjsjl'
      })
      if (data?.scene === 'login' && data?.seckill_id) {
        const aDetail = await getActivityDetail({ id: data.seckill_id }).catch(() => null)
        if (aDetail?.data?.data?.sub_code !== 'ok') return // 活动已失效
        if (data.title) {
          this.loginCfg.title = data.title
          this.loginCfg.btn = '立即登录领取'
        }
        if (Array.isArray(data.rights)) {
          this.loginCfg.rights = data.rights
        }
      }
    },
    async guideLoginInit () {
      await this.getLoginCfg()
      setTimeout(() => {
        // eslint-disable-next-line no-unused-expressions
        this.$refs.rigthsPopRef?.doShow?.()
      }, 300)

      this.docClickCloseRightPop_ = e => {
        let target = e.target
        while (target) {
          if (target.tagName === 'BODY') {
            target = null
          } else if (
            target.classList &&
              (
                target.classList.contains('ai__ppt_reset_rigths_pop') ||
                target.classList.contains('rest_rights')
              )
          ) {
            // 目标元素退出处理
            return
          } else {
            target = target.parentNode
          }
        }
        // eslint-disable-next-line no-unused-expressions
        this.$refs.rigthsPopRef?.doClose?.()
      }

      document.addEventListener('click', this.docClickCloseRightPop_, true)
    }
    // async getCfgConfig () {
    //   const { data } = await getBackEndConfig({
    //     app_id: this.appInfo.appID,
    //     version: this.appInfo.version,
    //     union_id: this.appInfo.channel,
    //     keyname: 'sjhytc'
    //   })
    //   if (!data?.params?.length || !data.params[0].length) return
    //   this.cfgConifg = data.params
    //   // console.log('this.cfgConifg', this.cfgConifg)
    // }
  },
  created () {
    // this.getCfgConfig()
  },
  mounted () {
    this.eventObj = {
      loginChangeLoaded: () => {
        console.log('loginChangeLoaded')
        // 登录后信息加载成功
        if (this.userInfo.userToken && this.$refs.rigthsPopRef) {
          this.newTokenTips = true
          this.$xz('HtmlClickReport', { ReportID: 7646 })
          this.$nextTick(() => {
            // eslint-disable-next-line no-unused-expressions
            this.$refs.rigthsPopRef?.doShow?.()
            // eslint-disable-next-line no-unused-expressions
            this.$refs.rigthsPopRef?.updatePopper?.() // hasLogin 可能触发doClose会导致doShow没有重新计算定位,需要操作一次updatePopper
          })
        }
      }
    }

    if (!this.hasLogin) {
      this.guideLoginInit()
    }
    this.isBuyTypeEnergy && window.addEventListener('loginChangeLoaded', this.eventObj.loginChangeLoaded)
  },
  beforeDestroy () {
    this.removeDocClickCloseRightPop()
    this.isBuyTypeEnergy && window.removeEventListener('loginChangeLoaded', this.eventObj.loginChangeLoaded)
  }
}
</script>

<style lang="scss" scoped>
.rest_rights {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  flex: 0 0 auto;
}

.rest__rights {
  padding: 6px 10px;
  @include flex-center;
  background: rgba(255,255,255,0.1);
  border-radius: 34px;
  cursor: pointer;
  line-height: 1;
  em {
    font-style: normal;
  }
  p {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba($color: #fff, $alpha: 0.7);
    font-size: 12px;
  }
  &:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
  }
}

.rest_rights_btn {
  display: flex;
  gap: 6px;
  position: relative;
}
.rest_rights_dynamic{
  position: absolute;
  right: -13px;
  top: -18px;
  padding: 4px 10px;
  line-height: 18px;
  background: #262736;
  box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.25);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
}

.login__tips {
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #606266;
  background: #FFFFFF;
  border-radius: 10px;
  .cursor:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}
.user__rights_list {
  padding: 12px;
  line-height: 1.2;
  color: #FFFFFF;
  --font-color: #FFFFFF;
  --head-color: #FFFFFF;
  --button-color: #7432ff;
  --button-text-color: #{$color-white};
  --button-hover-color: #{rgba($color: #7432ff, $alpha: 0.7)};
  background: linear-gradient( 180deg, #1D1F28 0%, #393D59 100%);
  border-radius: 10px;
  box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.1);
  box-sizing: border-box;
  // &.activity {
  //   --font-color: #7b4801;
  //   --svg-color: #7432ff;
  //   --button-text-color: #7b4801;
  //   --button-color: linear-gradient(180deg, #fff1d5 0%, #fce2b1 100%);
  //   --button-hover-color: linear-gradient(180deg, #fff1d5 0%, #fce2b1 100%);
  //   .head {
  //     flex-direction: column;
  //     padding-bottom: 8px;
  //     background-image: var(--b-vip-bg);
  //     background-repeat: no-repeat;
  //     background-size: 69px 52px;
  //     background-position: right center;
  //   }
  //   .to__vip_btn {
  //     display: block;
  //     width: 208px;
  //     height: 40px;
  //     color: var(--button-text-color);
  //     background: var(--button-color);
  //     border-radius: 35px;
  //     margin: 20px auto 24px auto;
  //     &:hover {
  //       background: var(--button-hover-color);
  //     }
  //   }
  // }
  &.vip {
    --font-color: #FFFFFF;
    --head-color: #F8DE9D;
    background: linear-gradient( 180deg, #403725 0%, #393D59 100%);
    position: relative;
    .user__rights_bg {
      &::before{
        background: rgba(255,220,172,0.38);
      }
    }
    .hg-icon {
      color: #{$vip-color};
    }
  }
  .user__rights_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    &::before {
      content: '';
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      height: 45px;
      background: #4A4F7B;
      filter: blur(35px);
    }
  }
  .user__rights_cont {
    position: relative;
  }

  .activity__image {
    margin: 20px 30px 0 30px;
  }
  .head {
    padding: 12px 0 14px;
    margin: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    gap: 6px;
    align-items: center;
    // color: var(--head-color);
    .nolLogin-title {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      width: 100%;
    }
  }
  .dropdown-wrap {
    position: relative;
  }
  .dropdown-link {
    cursor: pointer;
    padding: 5px 0;
    font-size: 12px;
  }
  .dropdown-menu {
    position: absolute;
    width: 120px;
    left: 50%;
    top: 100%;
    margin-left: -60px;
    background: $bg-color-primary;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    border-radius: $border-radius;
    border: $border-base;
    padding: 4px 0;
  }
  .dropdown-item {
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
    padding: 8px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    &:hover {
      background: rgba(255,255,255,0.05);
    }
  }

  .list__content {
    padding: 0 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 240px;
    overflow: auto;
  }
  .list__item {
    color: var(--font-text-color);
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--font-color);
    &::before {
      content: '';
      display: block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: var(--font-color);
      margin-right: 8px;
    }
    &.redwarn {
      color: #F15855;
      &::before {
        background-color: #F15855;
      }
    }
    &.indent {
      padding-left: 28px;
    }
  }

  .list__enegy {
    padding: 20px 14px 12px;
  }
  .rest__power {
    display: flex;
    align-items: center;
    gap: 4px;
    .power__title {
      flex: 1;
      font-size: 14px;
    }
    .power__text {
      font-weight: bold;
      font-size: 16px;
      color: $color-primary4;
    }
  }
  .btn__primary {
    width: 152px;
    min-height: 42px;
    padding: 5px;
    border-radius: 8px;
    --el-button-font-size-base: 14px;
    // --el-border-radius-base: 35px;
    --el-button-bg-color: none;
    --el-button-hover-bg-color: none;
    --el-button-text-color: var(--button-text-color);
    &.w-full {
      width: 100%;
    }
    .btn__primary-title {
      font-weight: bold;
      line-height: 18px;
    }
    .btn__primary-sub {
      font-size: 12px;
      font-weight: 400;
      opacity: .7;
      margin-top: 2px;
      line-height: 16px;
    }
    .btn__primary-title,
    .btn__primary-sub {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .rest__rights_footer {
    margin-top: 8px;
    padding: 0 14px;
    line-height: 1;
  }
  .rest__rights_footer.mutiple {
    justify-content: space-between;
  }
  .toLogin {
    width: 220px;
    // background: #7432FF;
    border-radius: 35px !important;
  }
}

.new-token {
  padding: 24px 20px;
  text-align: center;
}
.new-token_title {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  .svg-icon {
    font-size: 25px;
  }
}
.new-token_btns {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  .el-button {
    margin-left: 0;
    width: 116px;
    padding: 10px 20px;
    border-radius: 5px;
  }
}

.enegy__block {
  --bg-color: rgba(116,50,255,0.1);
  --title-color: #F8DE9D;
  &.bought {
    --bg-color: rgba(253,127,0,0.1);
    --title-color: #CB88FF;
  }
  background: var(--bg-color);
  border-radius: 6px;
  padding: 14px 4px 14px 15px;
  margin-top: 12px;
}
.enegy__title {
  font-weight: 400;
  font-size: 14px;
  color: var(--title-color);
}
.enegy__list {
  max-height: 105px;
  overflow: auto;
  margin-top: 12px;
  padding: 1px 0;
}
.enegy__item {
  +.enegy__item{
    margin-top: 13px;
  }
  display: flex;
  align-items: center;
  gap: 6px;
  > span {
    font-weight: bold;
    font-size: 14px;
  }
  > em {
    font-weight: 400;
    font-size: 12px;
    font-style: unset;
  }
}

.upgrade__tips {
  @include flex-center;
  span {
    background: linear-gradient(105.47deg, #4e5fff -4.09%, #7432ff 97.29%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
}
.rest__rights_footer {
  display: flex;
  justify-content: center;
  button {
    margin-bottom: 18px;
    border: 0;
  }
}
</style>
<style lang="scss">
  .ai__ppt_reset_rigths_pop {
    padding: 0;
    background: transparent;
    border: 0;
    .popper__arrow {
      display: none;
    }
    .new-token + .popper__arrow {
      display: block;
      border-top-color: #393D59;
      &::after {
        border-top-color: #393D59;
      }
    }
  }
</style>
